import { report } from '../utils/report.js'
import { deepCopy } from '../utils/common.js'

const next = window.requestAnimationFrame
    ? requestAnimationFrame : (callback) => { setTimeout(callback, 1000 / 60) }

const frames = []

/**
 * FPS（Frames Per Second）是指每秒帧数，它是衡量计算机图形处理能力的一个重要指标，特别是在动画、视频播放和游戏开发中。
 * 在网页性能监控中，FPS 通常用来评估页面的流畅度和响应速度。
 * 每秒帧数：在一秒钟内渲染的图像帧数。例如，如果一秒钟内渲染了 60 帧，那么 FPS 就是 60。
 * 用户体验：高 FPS 表示页面流畅，用户交互体验更好。低 FPS 可能会导致页面卡顿，影响用户体验。
 * 性能优化：通过监控 FPS，可以发现性能瓶颈，进而进行优化
 * */
export default function observeFps() {
    let frame = 0
    let lastSecond = Date.now()
    console.log(frame);
    
    function calculateFPS() {
        const now = Date.now()
        // 如果 now 大于或等于 lastSecond + 1000，说明已经过去了一秒或多于一秒，需要计算这一秒内的 FPS
        if (lastSecond + 1000 <= now) {
            // 由于 now - lastSecond 的单位是毫秒。故frame需要乘以 1000。
            const fps = Math.round((frame * 1000) / (now - lastSecond))
            frames.push(fps)
            console.log(frame);
            frame = 0
            lastSecond = now
        }
        // 避免上报太快，缓存一定数量再上报
        if (frames.length >= 60) {
            const data = deepCopy({
                type: 'performance',
                subType: 'fps',
                frames,
            })
            report(data)

            frames.length = 0
        }

        next(calculateFPS)
    }

    calculateFPS()
}
